<template>
  <view class="content">
    <view class="example">
      <overhaul-step :bidding="isBidding" :active="active" />
      <view class="buttn">
        <button type="primary" @click="submitData">提交</button>
      </view>
    </view>
    <view class="criter_bt">
      <view class="line"></view>
      <text>基本信息</text>
    </view>
    <view class="dec_main">
      <view class="dec_li dush_li">
        <view class="dec_le">
          <label>申请人员：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.create_user }}</text>
        </view>
      </view>
      <view class="dec_li dush_li">
        <view class="dec_le">
          <label>所属部门：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.apply_dept_name }}</text>
        </view>
      </view>
      <view class="dec_li">
        <view class="dec_le">
          <label>申报时间：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.create_date }}</text>
        </view>
      </view>
    </view>
    <view class="criter_bt">
      <view class="line"></view>
      <text>检修信息</text>
    </view>
    <view class="dec_main">
      <view class="dec_li dec_flex" v-if="jsonData.overhaul_type_desc">
        <view class="dec_le">
          <label>*检修类型：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.overhaul_type_desc }}</text>
        </view>
      </view>
      <view class="dec_li dec_flex" v-if="jsonData.bill_type_desc">
        <view class="dec_le">
          <label>*单据类型：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.bill_type_desc }}</text>
        </view>
      </view>
      <view class="dec_li dec_flex" v-if="jsonData.build_type_desc">
        <view class="dec_le">
          <label>*施工类型：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.build_type_desc }}</text>
        </view>
      </view>
      <view v-if="showBuild">
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*施工单位：</label>
          </view>
          <view class="dec_ri">
            <text>{{ jsonData.build_unit }}</text>
          </view>
        </view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*单位负责人：</label>
          </view>
          <view class="dec_ri">
            <text>{{ jsonData.build_person }}</text>
          </view>
        </view>
      </view>
      <view class="dec_li dec_flex"  v-if="jsonData.fault_class != 2 && jsonData.equipment_name ">
        <view class="dec_le">
          <label>*检修装置：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.equipment_name }}</text>
        </view>
      </view>
      <view class="dec_li dec_flex" v-if="jsonData.device_name">
        <view class="dec_le">
          <label>*检修设备：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.device_name }}</text>
        </view>
      </view>
      <view class="dec_li dec_flex" v-if="jsonData.device_no">
        <view class="dec_le">
          <label>*设备位号：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.device_no }}</text>
        </view>
      </view>
      <view class="dec_li dec_flex" v-if="jsonData.work_hours">
        <view class="dec_le">
          <label>工时：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.work_hours }}</text>
        </view>
      </view>
      <view class="dec_li" v-if="jsonData.info_pics.length>0">
        <view class="dec_le">
          <label>拍照取证：</label>
        </view>
        <view class="dec_ri">
          <view class="pic-view">
            <view style="width: 70%; display: flex">
              <view
                v-for="(jtem, j) in jsonData.info_pics"
                :key="j"
                style="margin: 10rpx"
              >
                <image
                  :src="fileUrl + jtem.pic_url"
                  class="detail_img"
                  @click="previewImg(jsonData.info_pics, j)"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="dec_li" v-if="jsonData.check_content">
        <view class="dec_le">
          <label>*检修内容：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.check_content }}</text>
        </view>
      </view>
      <view class="dec_li" v-if="jsonData.use_dept_name ">
        <view class="dec_le">
          <label>*使用部门：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.use_dept_name }}</text>
        </view>
      </view>
      <view class="dec_li" v-if="jsonData.audit_dept_name">
        <view class="dec_le">
          <label>*审核部门：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.audit_dept_name }}</text>
        </view>
      </view>
      <view class="dec_li">
        <view class="dec_le">
          <label>*计划开始时间：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.permission_date }}</text>
        </view>
      </view>
      <view class="dec_li">
        <view class="dec_le">
          <label>*计划结束时间：</label>
        </view>
        <view class="dec_ri">
          <text>{{ jsonData.permission_end_date }}</text>
        </view>
      </view>
    </view>

    <!-- 检修认定 -->
    <view v-if="planlist.length > 0">
      <view class="criter_bt">
        <view class="line"></view>
        <text>检修认定</text>
      </view>
      <view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*负责部门：</label>
          </view>
          <view class="dec_ri">
            <text>{{ planlist[planlist.length - 1].major_dept }}</text>
          </view>
        </view>

        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>{{ showBuild ? '*负责人' : '*主修人' }}</label>
          </view>
          <view class="dec_ri">
            <text>{{ planlist[planlist.length - 1].major_name || '' }}</text>
          </view>
        </view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*签名：</label>
          </view>
          <view class="dec_ri">
            <view class="sign-view">
              <image
                v-if="planlist[planlist.length - 1].major_sign"
                :src="fileUrl + planlist[planlist.length - 1].major_sign"
                @click="previewSign(planlist[planlist.length - 1].major_sign)"
              ></image>
            </view>
          </view>
        </view>

        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*检修人：</label>
          </view>
          <view class="dec_ri">
            <text>{{ planlist[planlist.length - 1].cooperate_user }}</text>
          </view>
        </view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*计划开始时间：</label>
          </view>
          <view class="dec_ri">
            <text>{{ planlist[planlist.length - 1].plan_begin_date }}</text>
          </view>
        </view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*认定描述：</label>
          </view>
          <view class="dec_ri">
            <text>{{ planlist[planlist.length - 1].confirm_desc }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 检修确认 -->
    <view v-if="confirmlist.length > 0">
      <view class="criter_bt">
        <view class="line"></view>
        <text>检修确认</text>
      </view>
      <view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>{{ showBuild ? '*负责人' : '*主修人' }}</label>
          </view>
          <view class="dec_ri">
            <text>{{ confirmlist[confirmlist.length - 1].major_name || '' }}</text>
          </view>
        </view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*签名确认：</label>
          </view>
          <view class="dec_ri">
            <view class="sign-view">
              <image
                v-if="confirmlist[confirmlist.length - 1].major_sign"
                :src="fileUrl + confirmlist[confirmlist.length - 1].major_sign"
                @click="
                  previewSign(confirmlist[confirmlist.length - 1].major_sign)
                "
              ></image>
            </view>
          </view>
        </view>

        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*验收人：</label>
          </view>
          <view class="dec_ri">
            <text>{{ confirmlist[confirmlist.length - 1].duty_name || ''}}</text>
          </view>
        </view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*签名确认：</label>
          </view>
          <view class="dec_ri">
            <view class="sign-view">
              <image
                v-if="confirmlist[confirmlist.length - 1].monitor_sign"
                :src="
                  fileUrl + confirmlist[confirmlist.length - 1].monitor_sign
                "
                @click="
                  previewSign(confirmlist[confirmlist.length - 1].monitor_sign)
                "
              ></image>
            </view>
          </view>
        </view>
        <!-- <view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*许可检修时间：</label>
					</view>
					<view class="dec_ri">
						<text>{{confirmlist[confirmlist.length - 1].permission_date}}</text>
					</view>
				</view> -->
        <view class="criter_bt">
          <view class="line"></view>
          <text>安全措施</text>
        </view>

        <view
          class="cfg-item"
          v-for="(item, i) in confirmlist[confirmlist.length - 1].checklist"
          :key="i"
        >
          <view class="cfg-title">风险分析</view>
          <view class="cfg-content">{{ item.risk_desc }}</view>
          <view class="cfg-title">安全措施</view>
          <view class="cfg-content">{{ item.safe_measure }}</view>
          <view>
            <text style="color: #0081ff" v-if="item.result == 1">是</text>
            <text style="color: #ed1c24" v-if="item.result == 2">否</text>
            <text style="color: #6a6a6a" v-if="item.result == 3">不涉及</text>
          </view>
        </view>

        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>补充措施：</label>
          </view>
          <view class="dec_ri">
            <text>{{
              confirmlist[confirmlist.length - 1].supplement_desc
            }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 检修处理 -->
    <view v-if="handlelist.length > 0">
      <view class="criter_bt">
        <view class="line"></view>
        <text>检修处理</text>
      </view>

      <view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>{{ showBuild ? '*负责人' : '*主修人' }}</label>
          </view>
          <view class="dec_ri">
            <text>{{ handlelist[handlelist.length - 1].major_name  || ''}}</text>
          </view>
        </view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*签名确认：</label>
          </view>
          <view class="dec_ri">
            <view class="sign-view">
              <image
                v-if="handlelist[handlelist.length - 1].major_sign"
                :src="fileUrl + handlelist[handlelist.length - 1].major_sign"
                @click="
                  previewSign(handlelist[handlelist.length - 1].major_sign)
                "
              ></image>
            </view>
          </view>
        </view>

        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*配合人：</label>
          </view>
          <view class="dec_ri">
            <text>{{ handlelist[handlelist.length - 1].cooperate_user }}</text>
          </view>
        </view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*签名确认：</label>
          </view>
          <view class="dec_ri">
            <view class="sign-view">
              <image
                v-if="handlelist[handlelist.length - 1].user_sign"
                :src="fileUrl + handlelist[handlelist.length - 1].user_sign"
                @click="
                  previewSign(handlelist[handlelist.length - 1].user_sign)
                "
              ></image>
            </view>
          </view>
        </view>
        <view class="dec_li dec_flex">
          <view class="dec_le">
            <label>*检修时间：</label>
          </view>
          <view class="dec_ri">
            <text>{{ handlelist[handlelist.length - 1].overhaul_date }}</text>
          </view>
        </view>

        <view class="dec_li">
          <view class="dec_le">
            <label>拍照取证：</label>
          </view>
          <view class="dec_ri">
            <view class="pic-view">
              <view style="width: 70%; display: flex">
                <view
                  v-for="(jtem, j) in handlelist[handlelist.length - 1]
                    .handle_pics"
                  :key="j"
                  style="margin: 10rpx"
                >
                  <image
                    :src="fileUrl + jtem.pic_url"
                    class="detail_img"
                    @click="
                      previewImg(
                        handlelist[handlelist.length - 1].handle_pics,
                        j
                      )
                    "
                  ></image>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="dec_li">
          <view class="dec_le">
            <label>*今日工作情况：</label>
          </view>
          <view class="dec_ri">
            <text>{{ handlelist[handlelist.length - 1].handle_desc }}</text>
          </view>
        </view>
        <view class="dec_li">
          <view class="dec_le">
            <label>*明日工作计划：</label>
          </view>
          <view class="dec_ri">
            <text>{{ handlelist[handlelist.length - 1].work_plan }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 检修验收 -->
    <view>
      <view class="criter_bt">
        <view class="line"></view>
        <text>检修验收</text>
      </view>

      <view class="dec_li dush_li">
        <view class="dec_le">
          <label>*检修验收：</label>
        </view>
        <view class="dec_ri">
          <radio-group @change="radioChange">
            <label>
              <radio
                value="r1"
                color="#267DFF"
                checked="true"
                style="transform: scale(0.8)"
              /><text style="margin-left: 10rpx">通过</text>
            </label>
            <label>
              <radio
                value="r2"
                color="#267DFF"
                style="transform: scale(0.8)"
                disabled="true"
              /><text style="margin-left: 10rpx">返工</text>
            </label>
          </radio-group>
        </view>
      </view>

      <view class="dec_li dush_li bottom-view">
        <view class="dec_le">
          <label>{{ showBuild ? '*负责人' : '*主修人' }}</label>
        </view>
        <view class="dec_ri">
          <text>{{ handlelist.length>0? handlelist[handlelist.length - 1].major_name :''}}</text>
        </view>
      </view>
      <view class="dec_li dush_li bottom-view">
        <view class="dec_le">
          <label>*签字确认：</label>
        </view>
        <view class="sign-view">
          <image
            :src="'data:image/svg+xml;base64,' + signStr"
            v-if="signStr != ''"
          ></image>
          <Signature ref="sig" v-model="signStr" class="signture"></Signature>
          <text @click="startSign()">+</text>
        </view>
      </view>

      <view class="dec_li dush_li bottom-view">
        <view class="dec_le">
          <label>*验收人：</label>
        </view>
        <view class="dec_ri">
          <text>{{ userName }}</text>
        </view>
      </view>

      <view class="dec_li dush_li bottom-view">
        <view class="dec_le">
          <label>*签字确认：</label>
        </view>
        <view class="sign-view">
          <image
            :src="'data:image/svg+xml;base64,' + signStr2"
            v-if="signStr2 != ''"
          ></image>
          <Signature ref="sig2" v-model="signStr2" class="signture"></Signature>
          <text @click="startSign2()">+</text>
        </view>
      </view>

      <view class="dec_li dush_li bottom-view">
        <view class="dec_le">
          <label v-if="result != 5">*检修时间：</label>
          <label v-if="result == 5">*终止时间：</label>
        </view>
        <view class="dec_ri">
          <uni-datetime-picker
            type="datetime"
            disabled
            class="m-picker"
            v-model="acceptDate"
            :border="false"
            :clearIcon="false"
          />
        </view>
      </view>
      <view class="dec_li dush_li">
        <view class="dec_le">
          <label>拍照取证：</label>
        </view>
        <view class="dec_ri">
          <uni-file-picker
            limit="3"
            :sizeType="sizeType"
            @select="picSelect"
            @delete="picDelete"
          ></uni-file-picker>
        </view>
      </view>
      <view class="dec_li dush_li">
        <view class="dec_le">
          <label>*验收描述：</label>
        </view>
        <view class="dec_ri">
          <uni-easyinput
            type="textarea"
            v-model="desc"
            maxlength="500"
            placeholder="请描述,500字以内"
          ></uni-easyinput>
        </view>
      </view>
    </view>
    <helang-compress ref="helangCompress"></helang-compress>
  </view>
</template>

<script>
import OverhaulStep from '@/components/selfs/OverhaulStep.vue'
import Signature from '@/components/sin-signature/sin-signature.vue'
import { getFormatDateTime } from '@/utils/date-util.js'
import { svg2Png } from '@/utils/base64.js'
import helangCompress from '@/components/helang-compress/helang-compressTwo'
import {
  FILE_URL,
  saveOverhaulVerify,
  uploadBase64Img,
  getOverhaulInfo,
} from '@/api/maintenance/selfs.js'
export default {
  components: {
    OverhaulStep,
    Signature,
    helangCompress,
  },
  data() {
    return {
      sizeType: ['compressed'],
      isBidding: false,
      active: 5,
      userName: '',
      userId: '',
      deptName: '',
      deptId: '',
      signStr: '',
      signPng: '',
      signStr2: '',
      signPng2: '',
      now: '',
      acceptDate: '',
      fileUrl: FILE_URL,
      desc: '',
      result: 3,
      imgPaths: [],
      overhaul_id: '',
      jsonData: {},
      // 认定
      planlist: [],
      // 确认
      confirmlist: [],
      handlelist: [],
      showBuild: false,
    }
  },
  methods: {
    dateChange(e) {
      this.permissionDate = e.detail.value
    },
    radioChange: function (evt, i) {
      console.log(evt.detail.value)
    },

    picSelect(e) {
      this.batchCompress(e.tempFilePaths)
    },
    picDelete(e) {
      console.log('DELETE', e)
      this.deletePic(e.tempFile.path)
    },
    // 批量压缩
    batchCompress(paths) {
      this.$refs.helangCompress
        .batchCompress({
          batchSrc: paths,
          maxSize: 500,
          fileType: 'png',
          quality: 0.4,
          minSize: 180,
          progress: (res) => {
            uni.showLoading({
              title: `进度:${res.done + res.fail}/${res.count}`,
            })
            console.log(res)
          },
        })
        .then((res) => {
          uni.hideLoading()
          uni.showToast({
            title: '压缩完成',
            icon: 'success',
          })
          this.uploadImg(res, paths)
        })
        .catch((err) => {
          uni.hideLoading()
          uni.showToast({
            title: '压缩失败' + err,
            icon: 'none',
          })
        })
    },
    uploadImg(base64Pics, paths) {
      let imgs = []
      for (let i = 0; i < base64Pics.length; i++) {
        imgs.push({ img: base64Pics[i].slice(22) })
      }
      let json = JSON.stringify(imgs)
      let params = { data: json }
      uploadBase64Img(params).then((res) => {
        console.log('UPLOAD', res)
        let json = res.datas
        for (let j = 0; j < json.length; j++) {
          this.imgPaths.push({
            path: paths[j],
            pic_url: json[j].new_file_url,
          })
        }
      })
    },
    deletePic(path) {
      for (let i = 0; i < this.imgPaths.length; i++) {
        if (path == this.imgPaths[i].path) {
          this.imgPaths.splice(i, 1)
          return
        }
      }
    },

    previewImg(imgs, index) {
      let pics = []
      for (let i = 0; i < imgs.length; i++) {
        pics[i] = this.fileUrl + imgs[i].pic_url
        console.log('PREVIEW', pics[i])
      }
      uni.previewImage({
        urls: pics,
        current: index,
      })
    },

    previewSign(sign) {
      let imgs = []
      console.log('SIGN', sign)
      imgs.push(this.fileUrl + sign)
      console.log('SIGN', imgs)
      uni.previewImage({
        urls: imgs,
      })
    },

    async startSign() {
      let s = await this.$refs.sig.getSyncSignature()
      svg2Png(s, (e) => {
        this.signPng = e
        console.log('签名数据', this.signPng)
      })
    },

    async startSign2() {
      let s = await this.$refs.sig2.getSyncSignature()
      svg2Png(s, (e) => {
        this.signPng2 = e
        console.log('签名数据2', this.signPng2)
      })
    },

    fetchDetailData() {
      let params = { overhaul_id: this.overhaul_id }
      uni.showLoading({
        title: '正在查询...',
      })
      getOverhaulInfo(params).then((res) => {
        this.jsonData = res.datas
        this.showBuild = this.jsonData.bill_type == 3
        this.planlist = this.jsonData.planlist
        this.confirmlist = this.jsonData.confirmlist
        this.handlelist = this.jsonData.handlelist
      })
    },

    submitData() {
      if (this.signStr == '' || this.signStr2 == '') {
        uni.showToast({
          title: '请签名确认',
          icon: 'none',
        })
        return
      }
      if (this.acceptDate == '') {
        uni.showToast({
          title: '请选择验收时间',
          icon: 'none',
        })
        return
      }
      // if (this.imgPaths.length == 0) {
      //   uni.showToast({
      //     title: '请先拍照取证',
      //     icon: 'none',
      //   })
      //   return
      // }
      if (this.desc == '') {
        uni.showToast({
          title: '请填写验收描述',
          icon: 'none',
        })
        return
      }

      let params = {
        plan_id: this.plan_id,
        overhaul_id: this.overhaul_id,
        user_id: this.userId,
        pic: JSON.stringify(this.imgPaths),
        overhaul_date: this.acceptDate,
        handle_type: 2,
        major_sign: this.signPng,
        user_sign: this.signPng2,
        handle_desc: this.desc,
      }
      uni.showLoading({
        title: '正在提交',
      })
      saveOverhaulVerify(params).then((res) => {
        uni.$emit('accept_refresh')
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 1500,
        })
        setTimeout(function () {
          // uni.navigateBack({})
		  window.android.backWeb();
        }, 500)
      })
    },
  },
  onLoad: function (e) {
    this.type = e.type
    this.userName = e.userName
    this.userId = e.userId
    this.deptName = e.deptName
    this.deptId = e.deptId
    this.overhaul_id = e.overhaul_id
    this.plan_id = e.plan_id
	console.log(JSON.parse(e.jsonData));
    this.fetchDetailData()
    this.now = getFormatDateTime()
    setTimeout(() => {
      this.acceptDate = getFormatDateTime()
    }, 500)
    this.isBidding = e.is_bidding == 1
  },
}
</script>

<style>
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fff;
}
view {
  font-size: 28upx;
  line-height: inherit;
}
.content {
  width: 100%;
  margin: 0 auto 80upx;
}
.example {
  width: 91%;
  margin: 20upx auto 20upx;
  padding: 0 30upx 0upx;
}
.example-body {
  padding: 0 40upx;
}
.buttn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		background-color: #FFF;
		
	}

	.buttn button {
		font-size: 30upx;
		background: #267dff;
		border-radius: 0;
		flex: 1;
		border-radius: 8rpx;
	}
.criter_bt {
  padding: 0 10px;
  height: 50px;
  background-color: #f7f7f7;
  font-weight: normal;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.line {
  width: 8upx;
  height: 30upx;
  background: #267dff;
  border-radius: 10upx;
  display: inline-block;
  vertical-align: middle;
}
.criter_bt text {
  padding-left: 10upx;
  vertical-align: middle;
  font-size: 32upx;
  color: #333333;
}
.dec_main {
  width: 94%;
}
.dec_li {
  width: 96%;
  margin: 30rpx 20rpx;
  overflow: hidden;
}
.dush_li {
  border-bottom: 1upx solid #f4f4f4;
  padding-bottom: 20upx;
}
.dec_le {
  width: 30%;
  float: left;
}
.dec_ri {
  float: left;
  width: 70%;
}
.dec_flex {
  min-height: 60rpx;
  display: flex;
  align-items: center;
}

.dec_li label {
  color: #267dff;
  font-size: 30upx;
}
.dec_li text {
  color: #666666;
  font-size: 30upx;
}
.dec_li .inppu {
  font-size: 30upx;
}
.sign-view {
  display: flex;
  align-items: center;
}
.sign-view image {
  width: 150rpx;
  height: 60rpx;
  border: #d4ced8 solid 1rpx;
  border-radius: 5rpx;
  margin-right: 30rpx;
}
.sign-view text {
  width: 150rpx;
  height: 60rpx;
  border: #267dff solid 1rpx;
  border-radius: 5rpx;
  color: #267dff;
  font-size: 45rpx;
  text-align: center;
}
.signture {
  width: 0;
  height: 0;
}
.m-picker {
  margin-left: -25rpx;
}
.bottom-view {
  height: 100rpx;
  display: flex;
  align-items: center;
}
.detail_img {
  width: 150rpx;
  height: 150rpx;
  border: #f4f4f4 solid 1rpx;
}
.pic-view {
  display: flex;
  align-items: center;
}
.cfg-item {
  padding: 20rpx;
  border-bottom: 1upx solid #f4f4f4;
}
.cfg-title {
  font-size: 32rpx;
  color: #267dff;
}
.cfg-content {
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
</style>
